import { Button, Spin, message, Space, Steps } from 'antd';
import { Ref, useEffect, useMemo, useRef, useState } from 'react';
import '../common/style.less';
import cls from 'classnames';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { getExtractExpertsDataGrid } from '../services/UpdateService';
import { SourceUpdateAPI } from '../common/type';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { ExtractListFirstStep } from './ExtractListFirstStep';

/**
 * @ExtractListModal 抽取弹窗
 * @param onClose 关闭事件
 * @returns
 */
const ExtractListModal = ({ onClose }: SourceUpdateAPI.ExtractListModalProps) => {
  const prefix = 'source-modal-form-';

  /** 子组件表单ref  第二步步骤 */
  const extractModalFormRef = useRef<SourceUpdateAPI.IExtractListFormRef>(null);

  /** 定义步骤 */
  const steps = [
    {
      title: '填充类型',
    },
    {
      title: '数据确认',
    },
  ];

  /**弹框的ref*/
  const extractModalRef: Ref<IOneModalRef> = useRef(null);

  /** 当前步骤 */
  const [current, setCurrent] = useState<number>(0);

  /** 抽取专家数据  保存一份 */
  const [extractData, setExtractData] = useState<Record<string, any>[]>([]);

  /**点击确定方法*/
  const onExtractOK = () => {
    extractModalFormRef?.current?.firstStepForm?.validateFields()?.then((values: any) => {
      let reqObj = {
        mexpertInfoList: [...values?.table],
      };
      extractExpertsRun(reqObj);
    });
  };

  /**点击取消方法*/
  const onExtractCancel = () => {
    onCloseModalCommon(extractModalRef);
  };

  /**点击确认方法*/
  const onExtractSure = () => {
    onCloseModalCommon(extractModalRef);
  };

  /**抽取专家Callback*/
  const extractExpertsCallback = (res: any) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
    }
  };

  /**添加方法services*/
  const { extractExpertsRun, extractExpertsLoading, extractExpertsData } = getExtractExpertsDataGrid(extractExpertsCallback);

  /** 请求完批量接口  如果有数据 自动跳到最后一步 */
  useEffect(() => {
    if (extractExpertsData && extractExpertsData?.length > 0) {
      setExtractData(extractExpertsData);
    }
  }, [extractExpertsData]);

  /** 底部按钮 */
  const footerModal = useMemo(() => {
    return (
      <div className={cls(prefix + 'footer')}>
        <Space>
          <Button
            key="back"
            onClick={onExtractCancel}
            // icon={<CloseCircleOutlined />}
          >
            关闭
          </Button>

          {current === 0 && (
            <Button
              // disabled={allUploadList ? false : true}
              onClick={() => {
                if (extractExpertsData.length > 0) {
                  setCurrent(1);
                } else {
                  message.error('未上传文件或文件解析错误');
                }
              }}
            >
              下一步
            </Button>
          )}
          {current === 1 && (
            <>
              <Button
                onClick={() => {
                  setCurrent(0);
                }}
                type="primary"
              >
                上一步
              </Button>
              <Button type="primary" onClick={onExtractSure}>
                确认
              </Button>
            </>
          )}
        </Space>
      </div>
    );
  }, [current, extractExpertsData]);

  /**改变步骤条 */
  const handleChangeSteps = (current: number) => {
    if (current === 0) {
      setExtractData(extractData);
      setCurrent(0);
    } else if (current === 1) {
      setExtractData(extractData);
      setCurrent(1);
    }
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={extractModalRef}
      title={'抽选专家'}
      onCancel={onClose}
      onOk={onExtractOK}
      width={document.body.clientWidth * 0.6}
      centered={true}
      bodyStyle={{ height: '500px', padding: '5px 10px' }}
      footer={footerModal}
    >
      <Spin spinning={extractExpertsLoading}>
        <div
          className={'source-modal-form'}
          // style={{
          //   height: window.screen.height * 0.4,
          // }}
        >
          <div className={cls(prefix + 'step')}>
            <Steps current={current} size={'small'} items={steps} onChange={handleChangeSteps} />
          </div>
          <div className={cls(prefix + 'content')}>
            <ScrollBarLayout>
              {current === 0 && <ExtractListFirstStep prefix={prefix} current={current} ref={extractModalFormRef} />}
              {/* {current === 1 && (
                  <ExtractListSecordStep prefix={prefix} current={current} tableList={extractData} ref={extractModalFormRef} />
                )} */}
            </ScrollBarLayout>
          </div>
        </div>
      </Spin>
    </OneModal>
  );
};
export default ExtractListModal;
